body {
    background-color: #F0F0F0;
    font-family:lucida grande, tahoma, verdana, arial, sans-serif;
    font-weight:normal;
    word-spacing: 2px;
}

/* center webpage */
#Center{
    width:960px; /* divides into 3 easily */
    border:1px solid gray;
    margin:0px auto /* centres page by saying 0px at top and bottom and auto the left and right margins*/

}


/* everything with nav is for the navigation bar */
nav {
  background-color:#DBEAF5;
  height:40px;
}
 
 
nav ul {
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav ul li {
  display: block;
  position: relative;
  float: left;
 
}
 
nav li ul { 
  display: none; 
}
 
nav ul li a {
  display: block;
  text-decoration: none;
  padding: 7px 15px 3px 15px;
  background: #DBEAF5;
  color: #6E6E6E;  
  margin-left: 15px;
  white-space: nowrap;
  height:30px; /* Width and height of top-level nav items */
  width:90px;
  text-align:center;
 
}
 
nav ul li a:hover { 
  background: #93BEE2; 
}
 
nav li:hover ul {
  display: block;
  position: absolute;
  height:30px;
}
 
nav li:hover li {
  float: none;
  font-size: 11px;
 
}
 
nav li:hover a { 
  background: #93BEE2; 
  height:30px; /* Height of lower-level nav items is shorter than main level */
}
 
nav li:hover li a:hover { 
  background: #95A9B1; 
}
 
nav ul li ul li a {
    text-align:center; /* Top-level items are centered, but nested list items are left-aligned */
}

/* end of Navi bar text (yeah she talks a lot)*/


.image {
    position: relative;
    width: 100%; /* for IE6 */
}

h2 {

    position: absolute;
    top: 220px;
    left: 180px;
    width: 100%;
}

h3 {

    position: absolute;
    top: 1220px;
    left: 180px;
    width: 100%;
}

#contact-form {
    width:465px;
    padding:0px;
    margin: 0px 20px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    position:relative;
}

#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label {
    font-size:15px;
    margin-bottom:2px;
}
 
#contact-form input, 
#contact-form select, 
#contact-form textarea {
    width:450px;
    border: 1px solid #FFF0AD;
    margin-bottom:20px;
    padding:4px;
}
 
#contact-form input:focus, 
#contact-form select:focus, 
#contact-form textarea:focus {
    border: 1px solid #FFF0AD;
    background-color: #FFF8D9;
}
 
#contact-form textarea {
    height:150px;
    resize: none;
}
 
#contact-form label {
    display:block;
}
 
#contact-form .required {
    font-weight:bold;
    color:#fffbcf;    
}
 
#contact-form #submit-button {
    width: 200px;
    background-color:#333;
    color:#FFF;
    border: 1px solid #FFF0AD;
    display:block;
    float:right;
    margin-bottom:0px;
    margin-right:6px;
    background-color:#E0B467;
    -moz-border-radius:8px;
}
 
#contact-form #submit-button:hover {
    background-color: #FFF8D9;
}
 
#contact-form #submit-button:active {
    position:relative;
    top:1px;
}
 
#contact-form #loading {
    width:32px;
    height:32px;
    background-image:url(../images/Contact/derpychase.gif);
    display:block;
    position:absolute;
    left:130px;
    bottom:16px;
    display:none;
}
 
#errors {
    border:solid 1px #E58E8E;
    padding:10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#FFE6E6 url(../images/Contact/fluttershyhugs.gif) no-repeat 405px center;
    display:none;
}
 
#errors li {
    padding:2px;
    list-style:none;    
}
 
#errors li:before {
    content: ' - ';    
}
 
#errors #info {
    font-weight:bold;
}
 
#errors #info:before {
    content: '';    
}
 
#success {
    border:solid 1px #83D186;
    padding:25px 10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#D3EDD3 url(../images/Contact/derpymercury.png) no-repeat 405px center;
    font-weight:bold;
    display:none;
}
 
#errors.visible, #success.visible {
    display:block;    
}
 
#req-field-desc {
    font-style:italic;
}
 
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

/* Normalize placeholder styles */
 
/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}
 
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}
 
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}